/*$brx:3px;
$wid:10px;
$whi:10px;

$fw:32px;
$fh:32px;

$ahi:320px;

$fs:26px;
$sz:18px;*/
html, body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box; }

.tb-container {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
  overflow: hidden; }
  .tb-container .tr {
    border: 1px solid #333;
    line-height: 0.68rem;
    float: left;
    padding-top: 100%;
    position: relative; }
    .tb-container .tr, .tb-container .tr * {
      font-size: 0.48rem; }
    .tb-container .tr .td {
      width: 100%;
      height: 100%;
      border-radius: 100%;
      border: 0.12rem solid red;
      font-weight: bold;
      text-align: center;
      color: #12ff05;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 1.2rem;
      display: flex;
      justify-content: center;
      align-items: center;}
    .tb-container .tr.type-z .td {
      border: 0.12rem solid red;
      color: red; }
    .tb-container .tr.type-x .td {
      border: 0.12rem solid #0061ff;
      color: #0061ff; }
    .tb-container .tr.type-h .td {
      border: 0.12rem solid #12ff05;
    }
    .tb-container .tr.icon-zd::before {
      display: block;
      content: '';
      width: 20%;
      height: 20%;
      position: absolute;
      border-radius: 50%;
      top: 0;
      left: 0;
      background: red;
      z-index: 999; }
    .tb-container .tr.icon-xd::after {
      display: block;
      content: '';
      position: absolute;
      border-radius: 50%;
      bottom: 0;
      right: 0;
      background: #0061ff;
      height: 20%;
      width: 20%; }

.shu .ying{
  text-align: center;
}
